<template>
  <div>
    <ul>
      <li>
        姓名:<input
          v-model="name"
          type="text"
          id="name"
          placeholder="请输入姓名"
        />
      </li>
      <li>
        电话号:<input
          v-model="phone"
          type="text"
          id="phone"
          placeholder="请输入电话号"
        />
      </li>
      <li>
        邮箱:<input
          v-model="email"
          type="text"
          id="email"
          placeholder="请输入邮箱"
        />
      </li>
      <li>
        内容:<input
          v-model="message"
          type="text"
          id="message"
          placeholder="请输入内容"
        />
      </li>
      <input @click="submit" type="button" id="btn" value="提交" />
      <li><span id="msg"></span></li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    submit() {
      //console.log(this.name, this.phone, this.email, this.message);
      const url = `add`;
      const params = `o_name=${this.name}&o_phone=${this.phone}&o_email=${this.email}&o_message=${this.message}`;
      this.axios.post(url, params).then((res) => {
        //console.log(res);
        //console.log("params:", params);
        alert(res.data.msg);
      });
    },
  },
  data() {
    return {
      name: "",
      phone: "",
      email: "",
      message: "",
    };
  },
};
</script>

<style lang="scss" scoped>
li {
  display: block;
  font-size: 25px;

  margin: 20px;
  margin-left: 750px;
}
input {
  height: 50px;
  width: 500px;
}
input::-webkit-input-placeholder {
  font-size: 20px;
}
#btn {
  font-size: 25px;
  width: 100px;
  display: block;
  margin: 0 auto;
}
</style>
